<template>
  <div class="scatter-chart-container" style="padding: 0">
    <div :style="{...chartStyle,'position':'relative'}">
      <div class="mapping-tit" :title="chartData.title">{{ chartData.title }}</div>
      <chart-header v-if="showHeader" :ShowChangeRadio="ShowChangeRadio" :dataType="dataType" :chart-data="chartData" @setChartOption="setChartOption" :showArBr="showArBr" :xLength="xLength" :yLength="yLength"/>
      <panelByFabric  ref="panelByFabric"/>
      <div :id="domId" :style="{'width':'100%', aspectRatio: xLength/yLength,'z-index':1}"></div>
<!--      <panelLayout-->
<!--          v-if="showPanel && chartData.model && chartData.model.length > 0"-->
<!--          :list="layoutInfo.list"-->
<!--          :width="layoutInfo.width"-->
<!--          :height="layoutInfo.height"-->
<!--          :top="layoutInfo.top"-->
<!--          :left="layoutInfo.left"-->
<!--          :layoutType="layoutType"-->
<!--          :xLength="xLength"-->
<!--          :yLength="yLength"-->
<!--      />-->
      <div ref="titleTip" class="titleTip" v-if="showTitleTip">{{ chartData && chartData.title }}</div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { isEmpty } from "lodash";
//import { mapLayout } from "@/api/alarm";
//import { getAgilityAnalyticsLayout } from "@/api/agile";
import panelLayout from './panelLayout.vue'
import ChartHeader from "./chartHeader.vue";
import methods from "./mixin/methods";
import panelByFabric from "../../views/panelByFabric.vue"
export default {
  mixins: [methods],
  props: {
    showHeader: {
      type: Boolean,
      default: true
    },
    showPanel: {
      type: Boolean,
      require: false,
      default: true
    },
    domId: { //图表dom id
      type: String,
      require: true,
      default: ''
    },
    chartData: {
      type: Object,
      require: true,
      default: {
        aoi: null,//aoi数据
        model: null,//产品型号
        op: null,//op数据
        title: null,//chart上方title
        showLegend: false
      }
    },
    dataType: {
      type: Array,
      default: () => ["aoi", "op"],
    },
    chartStyle: {
      type: Object,
      default: () => ({
        width: '50%'
      })
    },
    showArBr: {
      type: Boolean,
      default: false
    },
    layoutType: {
      type: String,
      default: 'MODEL',
    },
    ShowChangeRadio: {
      type: Boolean,
      default: true
    },
    PanelForB6: {
      type: Object,
      default: () => ({})
    }
  },
  components: {
    ChartHeader,
    panelLayout,
    panelByFabric
  },
  data() {
    return {
      props: { multiple: true },
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      myChart: null,
      layoutInfo: {
        list: [],
        width: 0,
        top: 0,
        left: 0
      },
      pointAOI: {},
      pointOP: {},
      showTitleTip: false,
      app: {
        factory: 'b19'
      }
    }
  },
  computed: {
    xLength () {
      if(this.PanelForB6.totalWidth){
        return this.PanelForB6.totalWidth
      }
      if (this.app.factory === 'b19') return 2620
      if (this.app.factory === 'b6') return 1500
      return 2500
    },
    yLength () {
      if(this.PanelForB6.totalHeight){
        return this.PanelForB6.totalHeight
      }
      if (this.app.factory === 'b19') return 2420
      if (this.app.factory === 'b6') return 1300
      return 2200
    },
  },
  activated() {
    window.addEventListener('resize', this.onChartResize)
  },
  deactivated() {
    window.removeEventListener('resize', this.onChartResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.onChartResize)
  },
  mounted() {
    //b6



    this.myChart = echarts.init(document.getElementById(this.domId));
    const { aoi, op } = this.chartData
    if (!isEmpty(aoi)) {
      this.pointAOI = Object.freeze(aoi.point)
    }
    if (!isEmpty(op)) {
      this.pointOP = Object.freeze(op.point)
    }
    const { gatherData, normalData } = this.initData()
    this.setChartOption(this.getScatterOptions(gatherData, normalData, this.xLength, this.yLength))
    this.myChart?.on('mouseover', (params) => {
      if (params.componentType === 'title') {
        this.showTitleTip = true
      }
    });
    this.myChart?.on('mouseout', (params) => {
      if (params.componentType === 'title') this.showTitleTip = false
    });
    // 监听渲染完成事件
    this.myChart?.on('finished',  ()=> {
      console.log('图表渲染完成');
      this.$nextTick(() => {
        this.myChart && this.showPanel && this.setChartPanelInfo()
      })
    })
  },
  methods: {
    setChartPanelInfoSimple() {
      this.$refs.panelByFabric.setLayout(this.myChart,this.PanelForB6)
    },
    initData() {
      const gatherData = []
      const normalData = []
      for (let key in this.pointAOI) {
        const { flag, glassX, glassY, panelX, panelY } = this.pointAOI[key]
        if (flag === -1) {
          normalData.push([glassX, glassY, panelX, panelY])
        } else {
          gatherData.push([glassX, glassY, panelX, panelY])
        }
      }
      for (let key in this.pointOP) {
        const { flag, glassX, glassY, panelX, panelY } = this.pointOP[key]
        if (flag === -1) {
          normalData.push([glassX, glassY, panelX, panelY])
        } else {
          gatherData.push([glassX, glassY, panelX, panelY])
        }
      }
      return { gatherData, normalData }
    },
    onChartResize() {
      this.myChart && this.myChart.resize()
      this.myChart.setOption({ graphic: this.getDimensionLines(this.xLength + '', this.yLength + '') });
      this.setChartPanelInfoSimple()
      // this.myChart && this.showPanel && this.setChartPanelInfo()
    },
    getLayoutData() {
      this.layoutInfo.list = []
      this.setChartPanelInfo()
      // mapLayout(this.chartData.model).then(res => {
      //   this.layoutInfo.list = res.data?.areas||[]
      //   this.setChartPanelInfo()
      // })
    },
    getLayoutDataByArrayModel() {//敏捷
      this.layoutInfo.list =[]
      this.setChartPanelInfo()
      // getAgilityAnalyticsLayout({arrayModel: Array.isArray(this.chartData.model) ? this.chartData.model : [this.chartData.model]}).then(res => {
      //   this.layoutInfo.list =[]
      //   this.setChartPanelInfo()
      // })
    },
    setChartOption(data) {
      this.myChart?.setOption?.(data)
      this.myChart?.setOption?.({ graphic: this.getDimensionLines(this.xLength + '', this.yLength + '') });
      this.setChartPanelInfoSimple()

      //this.showPanel && (this.layoutType === "MODEL" ? this.getLayoutData() : this.getLayoutDataByArrayModel())
    },
    // 获取绘制panelLayout的左上角坐标和宽度 并设置
    setChartPanelInfo() {
      if(!this.myChart){
        return
      }
      const { xAxisMinVal, xAxisMaxVal, yAxisMinVal, yAxisMaxVal } = {
        xAxisMinVal: this.myChart.getModel().getComponent('xAxis').axis.scale._extent[0], //x轴最小值
        xAxisMaxVal: this.myChart.getModel().getComponent('xAxis').axis.scale._extent[1], //x轴最大值
        yAxisMinVal: this.myChart.getModel().getComponent('yAxis').axis.scale._extent[0], //y轴最小值
        yAxisMaxVal: this.myChart.getModel().getComponent('yAxis').axis.scale._extent[1] //y轴最大值
      }
      const { xAxisMinCoor, xAxisMaxCoor, yAxisMinCoor, yAxisMaxCoor } = { //根据最小值和最大值获取坐标
        xAxisMinCoor: this.myChart.convertToPixel('grid', [xAxisMinVal, 0]), //x轴最小值坐标
        xAxisMaxCoor: this.myChart.convertToPixel('grid', [xAxisMaxVal, 0]), //x轴最大值坐标
        yAxisMinCoor: this.myChart.convertToPixel('grid', [0, yAxisMinVal]), //y轴最大值坐标
        yAxisMaxCoor: this.myChart.convertToPixel('grid', [0, yAxisMaxVal]) //y轴最大值坐标
      }
      // 根据坐标设置宽度高度
      this.layoutInfo.width = Math.abs(xAxisMaxCoor[0] - xAxisMinCoor[0])
      this.layoutInfo.height = Math.abs(yAxisMaxCoor[1] - yAxisMinCoor[1])
      this.layoutInfo.left = xAxisMinCoor[0]
      this.layoutInfo.top = yAxisMaxCoor[1]
    },
  },
}
</script>

<style scoped lang="stylus">
.scatter-chart-container
  margin-top 40px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 20px;
  border 1px solid red;

.el-scrollbar__view {
  height: auto !important;
}

.mapping_cascader .el-cascader-menu__wrap {
  width: 295px;
}
.titleTip {
  position: absolute;
  background: #fff;
  border: 1px solid #ddd;
  padding: 8px;
  border-radius: 4px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
  z-index: 1000;
  pointer-events: none;
  left:0;
  top:0;
  word-break: break-all;
}
.mapping-tit {
  color: rgb(51, 51, 51);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  position: absolute;
  width: 90%;
  top: -20px;
  left: 40px;
  z-index: 99;
}
</style>
